<template>
   <Header title="订单"></Header>

   <div class="content">
      <table border="1" cellpadding="0" cellspacing="0" >
         <tr>
            <th>订单编号</th>
            <th>商品列表</th>
            <th>订单总价</th>
            <th>订单数量</th>
         </tr>
         <tr v-for="o in orders">
            <td>{{o.orderId}}</td>
            <td><span v-for="i in o.titles">{{ i }}</span></td>
            <td>{{o.price}}</td>
            <td>{{o.totalCount}}</td>
         </tr>
      </table>
   </div>

   <Footer />

</template>
                   
<script setup>
import Header from '@/components/Header.vue'
import Footer from '@/components/Footer.vue'
import { userOrderStore } from '@/store/OrderStore'

const orderStore = userOrderStore();
const orders = orderStore.orders;
</script>


<style lang="less">
.content{
   table{
      font-size: 10px;
   }
}
</style>